

<template>
  <div>
    <el-card style="margin: 20px">
      <el-form :inline="true">
        <el-form-item label="类别">
          <el-select clearable v-model="type" placeholder="请选择类别" @change="changeType">
            <el-option
              v-for="(item, index) in typeOption"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="凹陷" v-if="type === '常规'">
          <el-select clearable v-model="queryInfo.dent" placeholder="请选择凹陷" @change="changeDent">
            <el-option
              v-for="(item, index) in dentOptions"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="井类型">
          <el-select clearable v-model="queryInfo.welltype" placeholder="请选择井类型" @change="changeWellType">
            <el-option
              v-for="item in wellTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="井号" v-if="queryInfo.welltype === '风险探井'">
          <el-select clearable v-model="queryInfo.wellname" filterable placeholder="请选择井号">
            <el-option
              v-for="(item,index) in wellnameOptions"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-radio v-model="barOrPie" label="bar">柱状图</el-radio>
        <el-radio v-model="barOrPie" label="pie">饼图</el-radio>
        <el-button @click="searchBtn" type="primary" :disabled="type == ''">查询</el-button>
        <el-button @click="settingWarning">设置预警值</el-button>
      </el-form>
    </el-card>

<!--    常规-->
    <div v-show="isCg" style="display: flex;justify-content: space-between">
      <el-card style="margin: 20px;width: 45%;">
        <div v-show="firstOrSecond === 1" id="main1" style="width: 100%; height: 600px;"></div>

        <div style="display: flex">
          <div v-show="firstOrSecond === 2" id="pieMain1" style="width: 100%; height: 600px;"></div>
        </div>

      </el-card>
      <el-card style="margin: 20px;width: 45%;">
        <div v-show="firstOrSecond === 1" id="main2" style="width: 100%; height: 600px;"></div>

        <div style="display: flex">
          <div v-show="firstOrSecond === 2" id="pieMain2" style="width: 50%; height: 600px;"></div>
          <div v-show="firstOrSecond === 2" id="pieMain3" style="width: 50%; height: 600px;"></div>
        </div>
      </el-card>
    </div>


<!--    非常规-->
    <div v-show="!isCg" style="display: flex;justify-content: space-between">
      <el-card style="margin: 20px;width: 45%;">
        <div v-show="firstOrSecond === 1" id="fcgmain1" style="width: 100%; height: 600px;"></div>

        <div style="display: flex">
          <div v-show="firstOrSecond === 2" id="fcgpieMain1" style="width: 50%; height: 600px;"></div>
          <div v-show="firstOrSecond === 2" id="fcgpieMain2" style="width: 50%; height: 600px;"></div>

        </div>

      </el-card>
      <el-card style="margin: 20px;width: 45%;">
        <div v-show="firstOrSecond === 1" id="fcgmain2" style="width: 100%; height: 600px;"></div>

        <div style="display: flex">
          <div v-show="firstOrSecond === 2" id="fcgpieMain3" style="width: 50%; height: 600px;"></div>
          <div v-show="firstOrSecond === 2" id="fcgpieMain4" style="width: 50%; height: 600px;"></div>
        </div>
      </el-card>
    </div>


<!--    设置预警值-->
    <el-dialog
      title="设置预警值"
      :visible.sync="warningDialogVisible"
      width="30%">
      <div>
        <el-form :model="warningForm" label-width="80px">
          <el-form-item label="最低值">
            <el-input-number v-model="warningForm.mkz2" :min="0" :max="1"></el-input-number>
          </el-form-item>
          <el-form-item label="最大值">
            <el-input-number v-model="warningForm.mkz1" :min="warningForm.min" :max="1"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="warningDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="warningDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getcgWarningList, getWarningList, getWarningWellnameList,getWellWarning } from "@/api/vadmin/budget/approve/approveapi";
import { Decrypt } from "@/utils/AesHmacMD5";
import * as echarts from "echarts";

export default {
  name: 'indexEcharts',
  data() {
    return  {
      queryInfo: {
        dent: '', //传递的凹陷类型
        welltype :'', //传递的井类型
        wellname: '', //井号
      },
      type: '', //类别
      typeOption: ['常规','非常规'],
      dentOptions: ['滩海地区','东营凹陷','沾化凹陷','车镇凹陷','惠民凹陷','其他地区',],//凹陷选项
      wellTypeOptions: [
        {label: '风险探井', value: 1},
        {label: '预探井', value: 2},
        {label: '评价井', value: 3},
      ],
      wellnameOptions: [], //井号选项框
      barOrPie: 'bar', //柱状图或饼图
      firstOrSecond: 1, //第一张图或第二张图
      isCg: true, //是否是常规

      chartsTitle: '', //图表标题,

      //判断是否单井
      isSingleWell: false, //是否是单井
      warningDialogVisible: true,
      warningForm: {
        mkz2: null,
        mkz1: null,
      },
    }
  },
  mounted() {
  },
  methods: {
    settingWarning() {
      getWellWarning(this.addDateRange(this.warningForm)).then(res => {
        console.log();
      })
    },


    //类别选项框change事件
    changeType() {
      this.queryInfo.dent = '' //凹陷清空
      this.queryInfo.welltype = '' //井类型清空
      this.queryInfo.wellname = '' //井号清空
    },
    changeDent() {
      this.queryInfo.welltype = '' //井类型清空
      this.queryInfo.wellname = '' //井号清空
    },
    //井类型的change事件====>修改井号options
    changeWellType() {
      this.queryInfo.wellname  = ''
      if(this.type == '常规' && this.queryInfo.welltype === '风险探井') {
        this.wellnameOptions = ['埕中10','桩海斜30']
      }else if(this.type == '非常规' && this.queryInfo.welltype === '风险探井') {
        this.getWarningWellnameList();
      }

    },
    //查询按钮点击事件
    searchBtn() {
      //防止点击的时候 直接切换
      if(this.barOrPie === 'bar') {
        this.firstOrSecond = 1
      }else {
        this.firstOrSecond = 2
      }

      if(this.queryInfo.wellname != '') {
        this.isSingleWell = true
      }else {
        this.isSingleWell = false
      }
      /*
      * 常规/非常规 this.type
      * 选择凹陷 this.queryInfo.dent
      * 选择井类型 this.queryInfo.welltype
      * 选择井号 this.queryInfo.wellname
      * */
      //当只有this.type有值的时候

// 统一处理常规和非常规类型
      const isCgType = this.type === '常规';
      const isWlType = this.type === '非常规';
      const dent = this.queryInfo.dent;
      const wellType = this.queryInfo.welltype;
      const wellName = this.queryInfo.wellname;

      if (isCgType) {
        this.getcgWarningList();
        this.isCg = true;
      } else if (isWlType) {
        this.getWarningList();
        this.isCg = false;
      }

      // 设置chartsTitle
      if (!dent && !wellType && !wellName) {
        this.chartsTitle = this.type + '勘探'; // 当只选择常规或非常规
      } else if (dent && !wellType && !wellName) {
        this.chartsTitle = dent; // 当选择凹陷
      } else if (dent && wellType && !wellName) {
        this.chartsTitle = wellType; // 当选择凹陷和井类型
      } else if (dent && wellType && wellName) {
        this.chartsTitle = wellName; // 当选择凹陷、井类型和井号
      } else if (wellType && !dent && !wellName) {
        this.chartsTitle = wellType; // 当选择井类型
      } else if (wellType && wellName && !dent) {
        this.chartsTitle = wellName; // 当选择井类型和井号
      }

    },

    //获取井号列表
    getWarningWellnameList() {
      getWarningWellnameList(this.addDateRange('aa')).then(res => {
        let resData = JSON.parse(Decrypt(res.data));
        // console.log(resData);
        this.wellnameOptions = resData.flat();
      })
    },

    //常规查询
    getcgWarningList() {
      console.log(this.isSingleWell, '===判断是否是单井');
      console.log(this.queryInfo, '常规查询参数');
      getcgWarningList(this.addDateRange(this.queryInfo)).then(res => {
        let resData = JSON.parse(Decrypt(res.data));
        console.log(resData, '常规预警数据');
        resData.forEach(item => {
          // 遍历对象的每个属性
          for (let key in item) {
              item[key] = parseFloat(item[key].toFixed(2));  // 保留小数点后两位
          }
        });
        if(this.barOrPie === 'bar') {
          this.drawBarLine1(resData[0],'main1') //费用图表
          this.drawBarLine2(resData[0],'main2') //费用图表
        }else {
          let fyData = [
            {value: resData[0].jhfy, name: '计划费用'},
            {value: resData[0].sjfy, name: '结算费用'}
          ]
          let jcData = [
            {value: resData[0].jhjc, name: '计划进尺'},
            {value: resData[0].sjjc, name: '实际进尺'}
          ]
          let ksData = [
            {value: resData[0].jhks, name: '计划口数'},
            {value: resData[0].sjks, name: '实际口数'},
          ]
          this.drawPieChart(fyData,'pieMain1','费用预警')
          this.drawPieChart(ksData,'pieMain2','口数预警')
          this.drawPieChart(jcData,'pieMain3','进尺预警')
        }
      })
    },
    //非常规查询
    getWarningList() {
      console.log(this.isSingleWell, '===判断是否是单井');

      getWarningList(this.addDateRange(this.queryInfo)).then(res => {
        let resData = JSON.parse(Decrypt(res.data));
        console.log(resData,'非常规的数据');
        /*
        * 只选类别时 数组3个值遍历相加
        * 选择类别和井类型时 取值  井号类别：1风险探井，2预探井，3评价井
        * */

        if(this.type === '非常规' && !this.queryInfo.welltype) {
          console.log('数据相加');
          let resDataSum = resData.reduce((acc, current) => {
            // 检查 current 是否有效
            if (current && typeof current === 'object') {
              for (let key in current) {
                // 如果 acc[key] 存在且是数字，则累加；否则赋值为 current[key]
                acc[key] = acc[key] ? acc[key] + (current[key] || 0) : current[key];
              }
            }
            return acc;
          }, {});
          resData = [resDataSum]
        }else if(this.type === '非常规' && this.queryInfo.welltype === '风险探井' && !this.queryInfo.wellname) {
          //找resData数组中jhlb == 1 的数据
          resData = resData.filter(item => item.jhlb === 1)
        }else if(this.type === '非常规' && this.queryInfo.welltype === '预探井') {
          //找resData数组中jhlb == 1 的数据
          resData = resData.filter(item => item.jhlb === 2)
        }else if(this.type === '非常规' && this.queryInfo.welltype === '评价井') {
          //找resData数组中jhlb == 1 的数据
          resData = resData.filter(item => item.jhlb === 3)
        }


        if(this.barOrPie === 'pie') {
          let zjData = [
            {value: resData[0].zjfy, name: '计划费用'},
            {value: resData[0].zjxj, name: '结算费用'}
          ]
          let syData = [
            {value: resData[0].syfy, name: '计划费用'},
            {value: resData[0].syxj, name: '结算费用'}
          ]
          let jcData = [
            {value: resData[0].zjjc, name: '计划进尺'},
            {value: resData[0].wcjc, name: '完成进尺'},
          ]
          let ksData = [
            {value: resData[0].zjks, name: '计划口数'},
            {value: resData[0].wj, name: '完井口数'},
          ]
          this.drawFcgPieChart(zjData,'fcgpieMain1','钻井费用')
          this.drawFcgPieChart(syData,'fcgpieMain2','试油费用')
          this.drawFcgPieChart(jcData,'fcgpieMain3','进尺完成')
          this.drawFcgPieChart(ksData,'fcgpieMain4','完井口数')
        }else {
          this.drawFcgBarLine1(resData[0],'fcgmain1')
          this.drawFcgBarLine2(resData[0],'fcgmain2')
        }
      })

    },

    //   常规两个图表
    drawBarLine1(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;

      let ratio1 = (data.sjfy / data.jhfy).toFixed(2);

      // 配置项
      option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          top: '30%',
          containLabel: true
        },
        title: {
          text: this.chartsTitle + "费用预警",
          subtext: [
            `{b|${this.chartsTitle}计划费用}{a|${data.jhfy}万元},{b|结算费用}{a|${data.sjfy}万元};`,
            `{b|结算占比}{a|${((data.sjfy/data.jhfy)*100).toFixed(2)}%}`

          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        dataset: {
          dimensions: ["name", "结算费用", "计划费用"],
          source: [
            { name: "费用", "结算费用": data.sjfy, "计划费用": data.jhfy },
          ]
        },
        xAxis: { type: "category" },
        yAxis: [
          // 第一个 Y 轴 - 完井(口数) 和 钻井口数
          {
            type: "value",
            name: "金额(万元)",
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "比例",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [{
          type: "bar",
          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["结算费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#f80606" // 设置字体颜色
          },
        }, {
          type: "bar",
          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          color: "#5470C6", // 设置字体颜色
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["计划费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#000" // 设置字体颜色
          }
        },
          // // 添加折线系列
          {
            type: "line",
            yAxisIndex: 1, // 使用第二个 Y 轴
            data: [ratio1], // 使用计算的比率数据
            label: {
              show: false,
              position: "top",
              formatter: function(params) {
                return params.value; // 显示比率，保留两位小数
              },
              color: "#ff0000" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#ff0000", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8 // 设置折线点的大小
          },
        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },
    drawBarLine2(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;

      let ratio1 = (data.sjks/data.jhks).toFixed(2); //口数比例
      let ratio2 = (data.sjjc/data.jhjc).toFixed(2);//进尺比例

      // // 配置每个柱状图的样式
      // let seriesData = [
      //   { value: data.wcjc, label: "完成进尺" }, // 第三项
      //   { value: data.zjjc, label: "钻井进尺" } // 第四项
      // ];
      let seriesData = [
        { value: data.sjks, label: "实际口数" }, // 第一项
        { value: data.jhks, label: "计划口数" }, // 第二项
        { value: data.sjjc, label: "实际进尺" }, // 第三项
        { value: data.jhjc, label: "计划进尺" }, // 第四项
      ];

      // 配置项
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          top: '30%',
          containLabel: true
        },
        title: {
          text: this.chartsTitle + "工作量预警",
          subtext: [
            `{b|${this.chartsTitle}计划进尺共}{a|${data.jhjc}万米},{b|实际完成进尺}{a|${data.sjjc}万米};` +
            `{b|完成占比} {a|${((data.sjjc/data.jhjc)*100).toFixed(2)}%}`,
            `{b|${this.chartsTitle}计划共}{a|${data.jhks}口},{b|实际完成}{a|${data.sjks}口};` +
            `{b|完成占比}{a|${((data.sjks/data.jhks)*100).toFixed(2)}%}`
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        xAxis: [
          {
            type: "category",
            data: ["完成工作量", "计划工作量"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "口数",
            position: "left",

            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            min: 0,
            max: data.jhks + 5
          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "万米",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            type: "bar",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            name: "口数",
            data: [data.sjks, data.jhks],
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex].label + ": " + params.value + '口';  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#91CC75", "#91CC75"];
                  return colorList[params.dataIndex];
                }
              }
            },
          },
          {
            type: "bar",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            name: "进尺",
            data: [data.sjjc, data.jhjc],
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex + 2].label + ": " + params.value + '万米';  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#0559f8", "#0559f8"];
                  return colorList[params.dataIndex];
                }
              }
            },
          },
          // 添加折线系列
          {
            type: "line",
            yAxisIndex: 1, // 使用第二个 Y 轴
            data: [ratio1, ratio2], // 使用计算的比率数据
            label: {
              show: true,
              position: "bottom",
              offset:[10,10],
              formatter: function(params) {
                // 根据数据值判断
                if (params.dataIndex === 0) {
                  return '探井口数完成比例: ' + params.value; // 第一个值加上“探井口数完成比例”
                } else if (params.dataIndex === 1) {
                  return '进尺完成比例: ' + params.value; // 第二个值加上“进尺完成比例”
                }
                return params.value; // 默认显示比率，保留两位小数
              },
              color: "#EE6666" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#EE6666", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8, // 设置折线点的大小
          }
        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },
    //绘制饼图
    drawPieChart(data,id,title) {
      let dataLabel = ''
      let dataUnit = ''
      let dataFinish = ''
      if(title === '进尺预警') {
        dataLabel = '完成进尺占比'
        dataUnit = '万米'
        dataFinish = '完成'
      }
      switch (title) {
        case '费用预警' :
          dataUnit = '万元'
          dataLabel = '计划预算'
          dataFinish = '结算'

          break
        case '进尺预警' :
          dataUnit = '万米'
          dataLabel = '计划'
          dataFinish = '完成'

          break
        case '口数预警' :
          dataUnit = '口'
          dataLabel = '计划'
          dataFinish = '完成'

          break
      }
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let radio = (data[1] / data[0]).toFixed(2);
      // 自定义颜色数组
      const colors = radio > 0.75 ? ['#448fde', '#c50303'] : ['#448fde', '#ff5900'];

      let option;

      // let ratio = ((data[1] / data[0]) * 100).toFixed(2);  // 结算费用占批复费用的比例

      option = {
        title: {
          text: this.chartsTitle + title,
          subtext: [
            `{b|${dataLabel}}{a|${data[0].value}${dataUnit}},{b|已${dataFinish}}{a|${data[1].value}${dataUnit}};`,
            `{b|${dataFinish}占比}{a|${((data[1].value/data[0].value)*100).toFixed(2)}%}`
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}: {d}%'  // 鼠标悬停时显示名称和百分比，{b} 是名称，{d} 是百分比
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '20%'  // 将图例向下移动到容器的中间位置
        },
        series: [
          {
            type: 'pie',
            radius: '40%',
            // data: [
            //   { value: ratio, name: dataLabel },  // 结算费用占批复费用的比例
            //   { value: (100 - ratio).toFixed(2), name: '剩余' },  // 剩余部分
            // ],
            label: {
              show: true,
              formatter: function (params) {
                return `${params.value}${dataUnit}`;  // 显示名称和数值，并加上单位
              },
              margin: 100,  // 标签和饼图之间的间距
              align: 'left',  // 标签左对齐，防止重叠
              verticalAlign: 'middle',  // 垂直居中
              // 如果需要旋转标签，以适应图表，可以加上 rotation 设置
            },
            data: data,
            itemStyle: {
              color: function (params) {
                // 根据不同的索引值给每个数据项分配不同的颜色
                return colors[params.dataIndex % colors.length]; // 如果数据项多于颜色数组，则循环使用颜色
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },

    //====非常规图表
    drawFcgBarLine1(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;

      let ratio1 = (data.zjxj / data.zjfy).toFixed(2);
      let ratio2 = (data.syxj / data.syfy).toFixed(2);
      // 配置项
      option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "5%",
          top: '25%',
          containLabel: true
        },
        title: {
          text: this.chartsTitle + "费用预警",
          subtext: [
            `{b|${this.chartsTitle}钻井预算费用共}{a|${data.zjfy}万元},{b|目前使用}{a|${data.zjxj}万元};` +
              `{b|钻井费用结算占比}{a|${((data.zjxj/data.zjfy)*100).toFixed(2)}%}`,
            `{b|试油预算费用共}{a|${data.syfy}万元},{b|目前使用}{a|${data.syxj}万元};` +
            `{b|试油费用结算占比}{a|${((data.syxj/data.syfy)*100).toFixed(2)}%}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        dataset: {
          dimensions: ["name", "结算费用", "计划费用"],
          source: [
            { name: "钻井", "结算费用": data.zjxj, "计划费用": data.zjfy },
            { name: "试油", "结算费用": data.syxj, "计划费用": data.syfy }
          ]
        },
        xAxis: { type: "category" },
        yAxis: [
          // 第一个 Y 轴 - 完井(口数) 和 钻井口数
          {
            type: "value",
            name: "金额(万元)",
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "比例",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [{
          type: "bar",
          color: "#f80606", // 设置字体颜色
          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["结算费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#f80606" // 设置字体颜色
          },
        }, {
          type: "bar",
          color: "#5470C6", // 设置字体颜色

          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["计划费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#000" // 设置字体颜色
          }
        },
          // 添加折线系列
          {
            type: "line",
            yAxisIndex: 1, // 使用第二个 Y 轴
            data: [ratio1, ratio2], // 使用计算的比率数据
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                return params.value; // 显示比率，保留两位小数
              },
              color: "#ff0000" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#ff0000", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8 // 设置折线点的大小
          },
        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },
    drawFcgBarLine2(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      // 计算比例
      let ratio1 = (data.wj/data.zjks).toFixed(2);
      let ratio2 = (data.wcjc/data.zjjc).toFixed(2);

      // 配置每个柱状图的样式
      let seriesData = [
        { value: data.wj, label: "钻井完井" }, // 第一项
        { value: data.zjks, label: "计划口数" }, // 第二项

        { value: data.wcjc, label: "完成进尺" }, // 第三项
        { value: data.zjjc, label: "计划进尺" } // 第四项
      ];

      // 配置项
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "5%",
          top: '25%',
          containLabel: true
        },
        title: {
          text:  this.chartsTitle + "工作量预警",
          subtext: [
            `{b|${this.chartsTitle}计划口数共}{a|${data.zjks}口},{b|目前完井}{a|${data.wj}口};`
            +
              `{b|完成占比}{a|${((data.wj/data.zjks)*100).toFixed(2)}%}`,
            `{b|${this.chartsTitle}计划进尺共}{a|${data.zjjc}万米},{b|目前完成进尺}{a|${data.wcjc}万米};`
            +
              `{b|完成占比}{a|${((data.wcjc/data.zjjc)*100).toFixed(2)}%}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        xAxis: [
          {
            type: "category",
            data: ["完成工作量", "计划工作量"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          // 第一个 Y 轴 - 完井(口数) 和 钻井口数
          {
            type: "value",
            name: "完井(口数)",
            position: "left",

            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            min: 0,
            max: data.zjks + 5
          },
          // 第二个 Y 轴 - 进尺(万米)
          {
            type: "value",
            name: "进尺(万米)",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91CC75"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            min: 0,
            max: Math.ceil(data.zjjc + 5) //取整

          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "比例",
            position: "right",
            offset: 40,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          // 第一个系列，数据为 '钻井完井' 和 '钻井口数'，并对应左侧 Y 轴
          {
            type: "bar",
            name: "口数",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            data: [data.wj, data.zjks], // 这里前两项数据
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#5470C6", "#5470C6"];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex].label + ": " + params.value;  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            markLine: ratio1 > 0.75 ? {  // 只有在 ratio1 > 0.75 时才显示 markLine
              lineStyle: {
                type: "dashed",
                color: "red"
              },
              data: [[{ type: "max" }, { type: "min" }]],
              label: {
                show: false // 隐藏标线上的文字
              }
            } : null,  // 如果条件不满足，markLine 不显示
          },
          {
            type: "bar",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            name: "进尺",
            data: [data.wcjc, data.zjjc],
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#91CC75", "#91CC75"];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex + 2].label + ": " + params.value;  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            markLine: ratio2 > 0.75 ? {  // 只有在 ratio1 > 0.75 时才显示 markLine
              lineStyle: {
                type: "dashed",
                color: "red"
              },
              data: [[{ type: "max" }, { type: "min" }]],
              label: {
                show: false // 隐藏标线上的文字
              }
            } : null,  // 如果条件不满足，markLine 不显示
          },
          // 添加折线系列
          {
            type: "line",
            yAxisIndex: 2, // 使用第二个 Y 轴
            data: [ratio1, ratio2], // 使用计算的比率数据
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                // 根据数据值判断
                if (params.dataIndex === 0) {
                  return '探井口数完成比例: ' + params.value; // 第一个值加上“探井口数完成比例”
                } else if (params.dataIndex === 1) {
                  return '进尺完成比例: ' + params.value; // 第二个值加上“进尺完成比例”
                }
                return params.value; // 默认显示比率，保留两位小数
              },
              color: "#EE6666" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#EE6666", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8, // 设置折线点的大小

          }

        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },

    //绘制饼图
    drawFcgPieChart(data,id,title) {

      let dataLabel = ''
      let dataUnit = ''
      if(title === '进尺完成') {
        dataLabel = '完成进尺占比'
        dataUnit = '万米'
      }
      switch (title) {
        case '钻井费用' :
          dataUnit = '万元'
          dataLabel = '钻井预算'
          break
        case '进尺完成' :
          dataUnit = '万米'
          dataLabel = '钻井进尺计划'
          break
        case '试油费用' :
          dataUnit = '万元'
          dataLabel = '试油预算'
          break
        case '完井口数' :
          dataUnit = '口数'
          dataLabel = '钻井口数计划'
          break
      }
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      // 自定义颜色数组
      // const colors = [ '#448fde','#c50303',];
      // 动态调整颜色数组
      const colors = data[1].value > data[0].value ? ['#448fde', '#ff5900'] : ['#448fde', '#c50303'];
      let option;

      option = {
        title: {
          text: this.chartsTitle + title,
          subtext: [
            `{b|${dataLabel}}{a|${data[0].value}${dataUnit}},{b|已完成}{a|${data[1].value}${dataUnit}};`,
            `{b|完成占比}{a|${((data[1].value/data[0].value)*100).toFixed(2)}%}`
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}: {d}%'  // 鼠标悬停时显示名称和百分比，{b} 是名称，{d} 是百分比
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '25%'  // 将图例向下移动到容器的中间位置
        },
        series: [
          {
            type: 'pie',
            radius: '40%',
            // data: [
            //   { value: ratio, name: dataLabel },  // 结算费用占批复费用的比例
            //   { value: (100 - ratio).toFixed(2), name: '剩余' },  // 剩余部分
            // ],
            label: {
              show: true,
              formatter: function (params) {
                return `${params.value}${dataUnit}`;  // 显示名称和数值，并加上单位
              },
              margin: 100,  // 标签和饼图之间的间距
              align: 'left',  // 标签左对齐，防止重叠
              verticalAlign: 'middle',  // 垂直居中
              // 如果需要旋转标签，以适应图表，可以加上 rotation 设置
            },
            data: data,
            itemStyle: {
              color: function (params) {
                // 根据不同的索引值给每个数据项分配不同的颜色
                return colors[params.dataIndex % colors.length]; // 如果数据项多于颜色数组，则循环使用颜色
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },

    //单井图表绘制



  }
}
</script>

<style scoped>

</style>
